<!doctype html>
<html>
<head>
	<title>静态页面</title>
	<style>
		body{
			text-align: center;
			background-color: #eee;
		}
		.wrapper{
			max-width: 600px;
			background-color:#fff;
			margin: 20px auto;
			padding: 30px;
		}
		.todo-list{
			margin: 0;padding: 0;
		}
		.todo{
			margin:0 0 -1px;padding: 0;list-style: none;
			border: 1px solid #ddd;text-align: left;			
		}
		.todo .view{
			position: relative;
			padding: 0 50px 0 40px;
		}
		.todo .view label{
			width: 100%;padding: 10px 0;
			display: block;line-height: 28px;font-size: 14px;
		}
		.view input,.view button{
			position: absolute;
			top: 15px;
		}
		.view input{
			left: 10px;
		}
		.view button{
			right: 10px;
		}
		.todo .edit{
			display: none;
		}
		.addBox{
			height: 50px;width: 100%;border: none;outline: none;
			padding:0 20px;font-size: 18px;box-sizing:border-box;
		}
	</style>
</head>
<body>
	<h1>Todos</h1>
	<div class="wrapper">	
		<ul class="todo-list">
			<li class="todo">
				<input class="addBox" type="text" placeholder="what needs to do?">	
			</li>
			<li class="todo">
				<div class="view">
					<input type="checkbox">
					<label>这是需要完成的内容！</label>
					<button class="destory">&times;</button>
				</div>
				<input type="text" class="edit">
			</li>
			<li class="todo">
				<div class="view">
					<input type="checkbox">
					<label>这是需这是需要完成的内容！这是需要完成的内容！这是需要完成的内容！这是需要完成的内容！这是需要完成的内容！这是需要完成的内容！要完成的内容！</label>
					<button class="destory">&times;</button>
				</div>
				<input type="text" class="edit">
			</li>
			<li class="todo">
				<div class="view">
					<input type="checkbox">
					<label>这是需要完成的内容！</label>
					<button class="destory">&times;</button>
				</div>
				<input type="text" class="edit">
			</li>
			<li class="todo">
				<div class="view">
					<input type="checkbox">
					<label>这是需要完成的内容！</label>
					<button class="destory">&times;</button>
				</div>
				<input type="text" class="edit">
			</li>
			<li class="todo">
				<div class="view">
					<input type="checkbox">
					<label>这是需要完成的内容！</label>
					<button class="destory">&times;</button>
				</div>
				<input type="text" class="edit">
			</li>
			
		</ul>
	</div>
</body>
</html>